<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>盒子模型圆角(box model border radius)</title>
  <!-- 
    CSS的盒子模型中的边框圆角（Border Radius）是指通过设置元素的边框角半径属性来实现边框角的圆角效果。通过设置border-radius属性，可以使元素的边框角变得圆润，而不是直角。
    以下是CSS盒子模型中边框圆角的主要要点： 
      
      1. 单个值：可以通过设置一个数值来定义所有四个边框角的圆角半径，例如border-radius: 10px;。 
      2. 两个值：可以通过设置两个数值来分别定义水平方向和垂直方向的边框角圆角半径，例如border-radius: 5px 10px;。 
      3. 四个值：可以通过设置四个数值来分别定义每个边框角的圆角半径，按顺序分别对应左上角、右上角、右下角和左下角，例如border-radius: 5px 10px 15px 20px;。 
   -->
   <style>
      div {
        width: 160px;
        height: 200px;
        background-color: sienna;
        border: 8px solid royalblue;
      }

      .border-radius-px {
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        border-radius: 10px;
      }

      .border-radius-percentage {
        border-radius: 50%;
      }
   </style>
</head>
<body>

  <div class="border-radius-px"></div>
  <div class="border-radius-percentage"></div>
  
</body>
</html>